<template>
  <div>
    <el-card>
      <el-row :gutter="20" type="flex" justify="space-around">
        <!-- 公众号 -->
        <el-col :span="4">
          <el-card class="QRcode">
            <el-card class="QRcode_img">
              <el-image :src="QRcode1"></el-image>
            </el-card>
            <el-card class="QR_Remark">扫描关注公众号</el-card>
          </el-card>
        </el-col>

        <!-- 微信群 -->
        <el-col :span="4">
          <el-card class="QRcode">
            <el-card class="QRcode_img">
              <el-image :src="QRcode2"></el-image>
            </el-card>
            <el-card class="QR_Remark">扫描加微信群</el-card>
          </el-card>
        </el-col>

        <!-- QQ群 -->
        <el-col :span="4">
          <el-card class="QRcode">
            <el-card class="QRcode_img">
              <el-image :src="QRcode3"></el-image>
            </el-card>
            <el-card class="QR_Remark">扫描加QQ群</el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 联系方式图
      QRcode1: require('../assets/imgs/vx.png'),
      QRcode2: require('../assets/imgs/vx_group.png'),
      QRcode3: require('../assets/imgs/qq_group.png')
    }
  }
}
</script>

<style scoped>
.QRcode {
  height: 250px;
}
.QRcode_img {
  height: 180px;
}
.QR_Remark {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
